<template>
   <div class="home">
      <!--左侧导航栏-->
      <div class="left">
         <left-component></left-component>
      </div>
      <!--右侧内容-->
      <div class="right">
         <RightComponent></RightComponent>
      </div>
   </div>
</template>
 <style scoped>

* {
   padding: 0;
   margin: 0;
}

.home {
   display: flex; /* 使用 Flexbox 布局 */
   height: 100vh; /* 父容器高度设置为视口高度 */
}

.left {
   background-color: #d82929;
   flex-shrink: 0; /* 防止左侧栏在屏幕缩小时缩小 */
   transition: width 0.3s; /* 可选，为宽度变化添加过渡效果 */
}

.right {
   flex-grow: 1; /* 右侧栏占据剩余空间 */
   height: 100vh; /* 右侧栏高度设置为视口高度 */

   overflow: auto; /* 如果内容超出，显示滚动条 */
}
</style>
<script setup>
import LeftComponent from "@/components/LeftComponent.vue";
import RightComponent from "@/components/RightComponent.vue";
</script>